<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./css/style.css">
</head>
<body>
    <!-- logo区 -->
    <nav>
        <img src="./images/logo.png" alt="logo">
        <div>
            <input type="text" placeholder="    Search...">
            <img src="./images/search-icon.png" alt="">
        </div>
    </nav>
    <!-- 导航区 -->
    <header >
        <ul class="ul1 clearfix">
            <li><img src="./images/menu-spacer.gif" alt=""></li>
            <li><img src="./images/menu-spacer.gif" alt=""></li>
            <li><img src="./images/menu-spacer.gif" alt=""></li>
            <li><img src="./images/menu-spacer.gif" alt=""></li>
            <li><img src="./images/menu-spacer.gif" alt=""></li>
            <li><img src="./images/menu-spacer.gif" alt=""></li>
        </ul>
        <ul class="ul_text">
            <li>HOME PAGE</li>
            <li>OUR COMPANY</li>
            <li>OUR SERVICE</li>
            <li>OUR PROJECTS</li>
            <li>CONTACT US</li>
        </ul>
    </header>
    <!-- 内容区 -->
    <article>
        <!-- 大图区 -->
        <section class="img_bg" >
            <img src="./images/center-shadow.png" alt="">
            <ul>
                <li><img src="./images/gallery-img2.png" alt=""></li>
                <li><img src="./images/gallery-img1.png" alt=""></li>
                <li><img src="./images/gallery-img3.png" alt=""></li>
            </ul>
        </section>
        <!-- 内容区 -->
        <section class="text_main">
            <aside class="text_left clearfix">
                <!-- 上面内容区 -->
                <section class="text_top">
                    <h2>Welcome! Why Choose Us?</h2>
                    <p>Consulting is one of <span>free website templates</span> created by TemplateMonster.com team. This website template is optimized for 1280X1024 screen resolution. It is also XHTML & CSS valid.</p>
                </section>
                <!-- 下方内容区 -->
                <section class="text_left_down clearfix">
                    <ul class="clearfix">
                        <!-- 第一个内容 -->
                        <li>
                            <div>
                                <img src="./images/page1-img1.png" alt="">
                                <h3><span>STARTING UP</span></h3>
                                <h4>How-to</h4>
                            </div>
                            <div>
                                <p>
                                    This <a href="#">Consulting Template</a> goes with two packages – with PSD source files and without them
                                </p>
                            </div>
                            <div>
                                <span><a href="">Know More</a></span>
                                <span>&rarr;</span>
                            </div>
                        </li>
                        <!-- 第二个内容 -->
                        <li>
                            <div>
                                <img src="./images/page1-img2.png" alt="">
                                <h3><span>DEVELOPMENT</span></h3>
                                <h4>Startegies</h4>
                            </div>
                            <div>
                                <p>
                                    PSD source files of this Consulting Templateare available for free for the registeredmembers of TemplateMonster.com.
                                </p>
                            </div>
                            <div>
                                <span><a href="">Know More</a></span>
                                <span>&rarr;</span>
                            </div>
                        </li>
                        <!-- 第三个内容 -->
                        <li>
                            <div>
                                <img src="./images/page1-img3.png" alt="">
                                <h3><span>PLANNING</span></h3>
                                <h4>Need Help?</h4>
                            </div>
                            <div>
                                <p>
                                    The basic package of this Consulting Template (without PSD source) is available for anyone without registration.
                                </p>
                            </div>
                            <div>
                                <span><a href="">Know More</a></span>
                                <span>&rarr;</span>
                            </div>
                        </li>
                        <!-- 第四个内容 -->
                        <li>
                            <div>
                                <img src="./images/page1-img4.png" alt="">
                                <h3><span>INTEGRATION</span></h3>
                                <h4>Exploit your ideas</h4>
                            </div>
                            <div>
                                <p>
                                    This template has several pages: <a href="#">Home</a>,<a href="#">Company</a>,<a href="#">Services</a>,<a href="#">Projects</a>,<a href="#">Contacts</a> (note that contact us form – doesn’t work).
                                </p>
                            </div>
                            <div>
                                <span><a href="">Know More</a></span>
                                <span>&rarr;</span>
                            </div>
                        </li>
                    </ul>
                </section>
            </aside>
            <!-- 右边内容区 -->
            <aside class="text_right clearfix">
                <!-- 上方内容区 -->
                <section class="text_right_top">
                    <h2>Testimonials</h2>
                </section>
                <!-- 下方内容区 -->
                <section class="text_right_down">
                    <ul>
                        <!-- 第一个内容 -->
                        <li>
                            <head>
                                <img src="./images/page1-img5.jpg" alt="">
                            </head>
                            <div>
                                <p class="p1">Director</p>
                                <h3><span>MARY RYAM</span></h3>
                            </div>
                            <div>
                                <P>
                                    Ut vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum atque corrupti...
                                </P>
                            </div>
                            <div>
                                <span><a href="#">Read More</a></span>
                                <span>&rarr;</span>
                            </div>
                        </li>
                        <!-- 第二个内容 -->
                        <li>
                            <head>
                                <img src="./images/page1-img6.jpg" alt="">
                            </head>
                            <div>
                                <p class="p1">Senior assistant</p>
                                <h3><span>BILL JOEL</span></h3>
                            </div>
                            <div>
                                <P>
                                    Ut vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum atque corrupti...
                                </P>
                            </div>
                            <div>
                                
                                <span><a href="#">Read More</a></span>
                                <span>&rarr;</span>
                            </div>
                        </li>
                        <!-- 第三个内容 -->
                        <li>
                            <head>
                                <img src="./images/page1-img7.jpg" alt="">
                            </head>
                            <div>
                                <p class="p1">Junior researcher</p>
                                <h3><span>MICHAEL ANDERSON</span></h3>
                            </div>
                            <div>
                                <P>
                                    Ut vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum atque corrupti...
                                </P>
                            </div>
                            <div>
                                <span><a href="#">Read More</a></span>
                                <span>&rarr;</span>
                            </div>
                        </li>
                    </ul>
                </section>
            </aside>

        </section>
    </article>
    <!-- 结尾区 -->
    <footer class="clearfix">
            <ul class="clearfix">
                <li class="left_li1">
                    <h3>CONTACT FORM:</h3>
                    <input class="input1" type="text" placeholder="   Email"><br>
                    <input type="text" placeholder="   Subject"><br>
                    <input type="text" placeholder="   Message"><br>
                    <div>
                        <span><a href="#">Clear</a></span>
                        <span><a href="#">Send</a></span>
                    </div>
                    
                </li>
                <li class="right_li1">
                    <h3>LINK TO US:</h3>
                    <img src="./images/social-icons.png" alt="">
                    <p class="p2">FACEBOOK</p>
                    <P>TWITTER</P>
                    <p>PICASSA</p>
                    <p>YOU TUBE</p>
                    <aside>
                        <p>Consulting.com © 2011 <br>
                            <span>Website Template</span>by TemplateMonster.com Professional free web templates <a href=""> at <br>
                            www.websitetemplatesonline.com</a>. | <a href="">Flashtemplates.com</a>.Flash Design - the Smart Choice.</p>
                    </aside>
                </li>
            </ul>

    </footer>
</body>
</html>